<template>
	<view class="content">


		<view class="mt13"></view>

		<view class="yd-cell-box" v-if="template == 1 && headerList != '' " v-for="(items,indx) in headerList" v-bind:key="indx">
			<view class="yd-cell">
				<view class="detail-header lyx-flex lyx-flex-justify-content-between lyx-flex-align-items-center" :style="{'backgroundColor': items[2]}">
					<view class="lyx-flex lyx-flex-align-items-center">
						<view class="detail-icon-img lyx-flex lyx-flex-align-items-center">
							<image mode="aspectFit" @error="imageError" style="width: 50upx;height: 50upx;" :src="items[3] ? items[3] : '../../static/img/tuandui.png'"></image>
						</view>
						<view class="uni-list-cell__content">
							<view class="uni-list-cell__content-title">{{items[1]}}</view>
						</view>
					</view>
					<view class="detail-header-sum">{{items[4]}}</view>
				</view>
				<view class="">
					<view class="yd-cell-item" v-for="(item,index) in dataList" v-bind:key="index" v-if="index >= items[0][0] && index < items[0][1]">
						<view class="yd-cell-left">{{item[0]}}</view>
						<view class="yd-cell-right">{{item[1]}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="yd-cell-box" v-if="template == 2 && headerList != ''">
			<view class="yd-cell lyx-flex" v-for="(items,indx) in headerList" v-bind:key="indx">
				<view class="left-line uni-flex uni-column" :style="{'backgroundColor': items[2]}">
					<view>{{items[1]}}</view>
				</view>
				<view class="right-content">
					<view class="yd-cell-item" v-for="(item,index) in dataList" v-bind:key="index">
						<view class="yd-cell-left">{{item[0]}}</view>
						<view class="yd-cell-right">{{item[1]}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="yd-cell-box" v-if="!headerList">
			<view class="yd-cell">
				<view class="yd-cell-item" v-for="(item,index) in dataList" v-bind:key="index">
					<view class="yd-cell-left">{{item[0]}}</view>
					<view class="yd-cell-right">{{item[1]}}</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				dataList: {},
				headerList: {},
				template: 1
			};
		},
		onLoad(option) {
			this.getGongZiData(option.id);

		},
		methods: {
			getGongZiData(data) {
				uni.showLoading({
					title: '加载中'
				});
				this.$http.getOneMouthDetail(data).then(ret => {
					uni.hideLoading();
					if (ret.status == 1) {

						this.dataList = ret.result.content;
						this.headerList = ret.result.header;
						this.template = ret.result.template;
					} else {
						this.dataList = [];
					}
				})
			},
		},
		imageError(e) {
			console.log(e, '加载图片出错了');
		}
	}
</script>

<style>
	.lyx-flex {
		display: flex;
	}

	.left-line {
		text-align: center;
		color: #FFFFFF;
		width: 20%;
		justify-content: center;
	}

	.right-content {
		width: 80%;
	}

	.detail-header {
		font-size: 32upx;
		width: 100%;
		height: 84px;
		color: #FFFFFF;
		font-weight: bold;
	}

	.detail-icon-img {
		margin-left: 40upx;
	}
	.detail-header-sum {
		margin-right: 40upx;
	}
	image {
		will-change: transform
	}
</style>
